<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.2</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <#include "common/header-static.ftl">
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">管理员管理</a>
                <a href="">数据监控列表</a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="查询日期" name="theDate"
                                   id="theDate" value="${theDate}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始时间" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="结束时间" name="end" id="end">
                        </div>
                        <div class="layui-input-inline">
                            <select id="messageType" lay-verify="required" lay-search="">
                                <option value="">监控类型</option>
                                <option value="1">Controller</option>
                                <option value="2">Service</option>
                                <option value="3">Mapper</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="resultType" lay-verify="required" lay-search="">
                                <option value="">结果类型</option>
                                <option value="info">正常</option>
                                <option value="error">错误</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="costTimeType" lay-verify="required" lay-search="">
                                <option value="">请求时长</option>
                                <option value="0">小于等于1000ms</option>
                                <option value="1">大于1000ms小于等于3000ms</option>
                                <option value="2">大于3000ms</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="modelName" id="modelName" placeholder="模块名称">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="evnName" id="evnName" placeholder="环境名称">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="keyword" id="keyword" placeholder="关键字"
                                   style="width: 200px;">
                        </div>
                        <a class="layui-btn" id="pageSearchButton" style="height: 38px; line-height: 38px;"
                           data-type="reload">搜索</a>
                    </form>
                </div>

                <h3 class="layui-colla-title">接口列表<i class="layui-icon layui-colla-icon"></i></h3>
                <div class="layui-card-body ">
                    <table id="pageSearch" lay-filter="test" style="margin: 0 auto;"></table>
                </div>

                <h3 class="layui-colla-title">接口详情<i class="layui-icon layui-colla-icon"></i></h3>
                <div class="layui-card-body ">
                    <table id="viewPageSearch" lay-filter="viewPageSearch" style="margin: 0 auto;"></table>
                </div>
            </div>
        </div>
    </div>
    <#--<div class="layui-row div-inline">
        <div class="layui-card-body " style="text-align: center;">
            <div class="layui-inline">
                <table id="viewPageSearch" lay-filter="viewPageSearch" style="margin: 0 auto;"></table>
            </div>
        </div>
    </div>-->
</div>
<script>
    $(document).ready(function () {
        initPageSearch();
        initViewPageSearch(-1);
    });

    function initPageSearch() {
        var theDate = $("#theDate").val();
        layui.use(['table', 'laydate', 'form'], function () {
            var $ = layui.$;
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;
            form.render();

            laydate.render({
                elem: '#theDate' //指定元素
                , type: 'date'
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
                , type: 'time'
                , format: 'HH:mm:ss'
            });
            laydate.render({
                elem: '#end' //指定元素
                , type: 'time'
                , format: 'HH:mm:ss'
            });
            //这里渲染表格
            table.render({
                elem: '#pageSearch'
                //  , height: 'full-160'
                // , width : '1465'
                , height: '342'
                , even: true
                , size: 'sm'
                , method: 'post'
                , url: '${request.contextPath}/admin/monitor/messagePageSearch' //数据接口
                , where: {
                    theDate: theDate
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total,//res.total, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , loading: false
                , sort: true
                , page: true //开启分页
                , contentType: 'application/json'
                , limits: [10, 30, 50]
                , cols: [[ //表头
                    {type: 'numbers', title: '序号', width: '5%'}
                    , {field: 'classMethod', title: '类名', width: '20%', align: 'left'}
                    , {field: 'evnName', title: '环境名称', width: '6%', align: 'left'}
                    , {field: 'modelName', title: '模块名称', width: '10%', align: 'left'}
                    , {
                        field: 'costTime', title: '执行时长', width: '8%', align: 'left',
                        templet: function (data) {
                            return data.costTime + 'ms';
                        }, sort: true
                    }
                    , {field: 'messageKey', title: '消息Key', width: '10%', align: 'left'}
                    , {field: 'monitorRequestMessageKey', title: '请求消息Key', width: '10%', align: 'left', hide: true}
                    , {field: 'requestUrl', title: '请求Url', width: '15%', align: 'left'}
                    , {field: 'requestIp', title: '请求Ip', width: '6%', align: 'left'}
                    , {field: 'startTime', title: '请求时间', width: '13%', align: 'left', sort: true}
                    /* , {field: 'requestParams', title: '请求参数', width: '10%', align: 'left', hidden: true}*/
                    , {
                        field: 'resultType', title: '执行结果', width: '8.54%', align: 'left',
                        templet: function (data) {
                            if (data.resultType == 'info') {
                                return '正常';
                            } else if (data.resultType == 'error') {
                                return '错误';
                            } else {
                                return '其他';
                            }
                        }
                    }
                    , {field: 'monitorExtMsg', title: '其他信息', width: '10%', align: 'left'}
                ]]
            });

            table.on('rowDouble(test)', function (obj) {
                var data = obj.data;
                var reqMessageKey = data.monitorRequestMessageKey;
                initViewPageSearch(reqMessageKey);
            });

            //这里是查询
            var active = {
                reload: function () {
                    var start = $("#start").val();
                    var end = $("#end").val();
                    var theDate = $("#theDate").val();
                    var messageType = $("#messageType").val();
                    var evnName = $("#evnName").val();
                    var modelName = $("#modelName").val();
                    var resultType = $("#resultType").val();
                    var keyword = $("#keyword").val();
                    var costTimeType = $("#costTimeType").val();
                    table.reload('pageSearch', {
                        where: {
                            start: start,
                            end: end,
                            theDate: theDate,
                            messageType: messageType,
                            evnName: evnName,
                            modelName: modelName,
                            resultType: resultType,
                            keyword: keyword,
                            costTimeType: costTimeType
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            };
            $('#pageSearchButton').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听行单击事件（双击事件为：rowDouble）
            table.on('sort(test)', function (obj) {
                // var data = obj.data;
                var field = obj.field;  //当前排序的字段名
                var type = obj.type;  //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
                var start = $("#start").val();
                var end = $("#end").val();
                var theDate = $("#theDate").val();
                var messageType = $("#messageType").val();
                var resultType = $("#resultType").val();
                var keyword = $("#keyword").val();
                var costTimeType = $("#costTimeType").val();
                console.log(field + "," + type);
                table.reload('pageSearch', { //testTable是表格容器id
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                    , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: field,//排序字段
                        order: type, //排序方式
                        start: start,
                        end: end,
                        theDate: theDate,
                        messageType: messageType,
                        resultType: resultType,
                        keyword: keyword,
                        costTimeType: costTimeType
                    }
                });
            });
        });
    }


    function initViewPageSearch(requestMessageKey) {
        var theDate = $("#theDate").val();
        layui.use(['table', 'form'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            form.render();
            //这里渲染表格
            table.render({
                elem: '#viewPageSearch'
                //  , height: 'full-160'
                // , width : '1465'
                , height: '342'
                , even: true
                , size: 'sm'
                , method: 'post'
                , url: '${request.contextPath}/admin/monitor/messagePageSearch' //数据接口
                , where: {
                    requestMessageKey: requestMessageKey,
                    theDate: theDate,
                    limit: 1000
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total,//res.total, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , loading: false
                , page: false //开启分页
                , contentType: 'application/json'
                , limits: [10, 30, 50]
                , cols: [[ //表头
                    {type: 'numbers', title: '序号', width: '5%'}
                    , {field: 'classMethod', title: '类名', width: '20%', align: 'left'}
                    , {field: 'evnName', title: '环境名称', width: '6%', align: 'left'}
                    , {field: 'modelName', title: '模块名称', width: '10%', align: 'left'}
                    , {
                        field: 'costTime', title: '执行时长', width: '8%', align: 'left',
                        templet: function (data) {
                            return data.costTime + 'ms';
                        }, sort: true
                    }
                    , {field: 'messageKey', title: '消息Key', width: '10%', align: 'left'}
                    , {field: 'monitorRequestMessageKey', title: '请求消息Key', width: '10%', align: 'left', hide: true}
                    , {field: 'requestUrl', title: '请求Url', width: '15%', align: 'left'}
                    , {field: 'requestIp', title: '请求Ip', width: '6%', align: 'left'}
                    , {field: 'startTime', title: '请求时间', width: '13%', align: 'left', sort: true}
                    /* , {field: 'requestParams', title: '请求参数', width: '10%', align: 'left', hidden: true}*/
                    , {
                        field: 'resultType', title: '执行结果', width: '8.54%', align: 'left',
                        templet: function (data) {
                            if (data.resultType == 'info') {
                                return '正常';
                            } else if (data.resultType == 'error') {
                                return '错误';
                            } else {
                                return '其他';
                            }
                        }
                    }
                ]]
            });
        });
    }

</script>
</body>

</html>